/**
 * 管理员页面样式
 */
@headerHeight: 55px;

@slideWeight: 280px;

@footerHeight: 35px;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  position: relative;
  width: 100%;
  height: 100%;
}


/* =================↓ 顶部 ↓================= */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: @headerHeight;
  background: #444348;
  text-align: center;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

  .title {
    line-height: @headerHeight;
    color: #fff;
    font-weight: normal;
  }
}


/* =================↓ 侧边导航 ↓================= */
.slide {
  position: fixed;
  width: @slideWeight;
  height: calc(100% - @headerHeight - @footerHeight);
  top: @headerHeight;
  left: 0;
  background: #3b3a40;
}


/* =================↓ 主区域 ↓================= */
main {
  position: fixed;
  width: calc(100% - @slideWeight);
  height: calc(100% - @headerHeight - @footerHeight);
  top: @headerHeight;
  left: @slideWeight;

  section {
    padding: 20px;

    .title {
      margin: 10px 0;
    }

    .table {
      max-height: calc(100% - @headerHeight - @footerHeight - 60px);
    }

    .add-div {
      .input-div {
        display: flex;

        .el-input {
          margin: 10px 0;
        }
      }

      .btn-add {
        float: right;
        margin-top: 15px;
      }
    }

    .pagination {
      margin-top: 15px;
    }
  }

}


/* =================↓ 底部 ↓================= */
footer {
  position: fixed;
  width: 100%;
  height: @footerHeight;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

  div {
    width: fit-content;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    font-size: 14px;

    span {
      margin: 0 10px;

      a {
        text-decoration: none;
      }
    }
  }

}